<template>
  <div class="labrary-change">
    <div>
      <el-button type="text" @click="SubmitEvent">提交</el-button>
    </div>
    <div class="aaa" v-for="(item, index) in userList" :key="item._id">
      <div class="top">
        <div>
          <span style="margin-right: 16px">编号:{{ item._id }}</span>
          <span>名称:{{ item.name }}</span>
        </div>
        <div>
          <el-button type="text" style="margin-right: 16px" @click="flagTo(index)">{{
            userList[index].flag ? '展开' : '收起'
          }}</el-button>
          <el-popover
            @after-leave="afterLeave(index)"
            placement="bottom"
            title="添加新属性"
            :width="200"
            trigger="click"
          >
            <template #reference>
              <el-button type="text">操作</el-button>
            </template>
            <div>
              <el-input
                v-model="labelText"
                placeholder="请输入你要添加的标签"
                size="large"
              ></el-input>
              <el-input
                v-model="labelValue"
                placeholder="请输入标签id，仅为4-8位英文"
                size="large"
              ></el-input>
              <el-button @click="addLabel(index)" type="text">确定</el-button>
            </div>
          </el-popover>
        </div>
      </div>
      <div :class="{ content: true, flagFalse: userList[index].flag }">
        <el-form :inline="true">
          <el-form-item label="username">
            <el-input v-model="userList[index].username" size="large"></el-input>
          </el-form-item>
          <el-form-item label="role">
            <el-select
              v-model="userList[index].role"
              placeholder="请选择搜索选项"
              size="large"
              style="width: 300px"
            >
              <el-option
                v-for="item in [
                  {
                    value: 'sysAdmin',
                    label: '系统管理员'
                  },
                  {
                    value: 'student',
                    label: '学生'
                  },
                  {
                    value: 'labAdmin',
                    label: '图书管理员'
                  }
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="username">
            <el-input v-model="userList[index].username" size="large"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryUsersList } from '@/api/users/login'
import { onMounted, ref, watch, reactive, toRefs } from 'vue'

const state = reactive({
  userList: []
})
const getUsersDataList = async () => {
  const { data } = await queryUsersList()
  state.userList = data.list.map((item) => {
    return { flag: false, ...item }
  })
  oldList.value = JSON.parse(JSON.stringify(state.userList))
}

const compareObjects = (obj1, obj2) => {
  let unmatchedAttributes = []

  for (let key in obj1) {
    if (Object.hasOwn(obj1, key) && !Object.hasOwn(obj2, key)) {
      unmatchedAttributes.push({ [key]: obj1[key] })
    }
  }

  // Check attributes in obj2 that are not in obj1
  for (let key in obj2) {
    if (Object.hasOwn(obj2, key) && !Object.hasOwn(obj1, key)) {
      unmatchedAttributes.push({ [key]: obj2[key] })
    }
  }

  return unmatchedAttributes
}
const labelIndex = ref(-1)
const oldList = ref([])
watch(
  () => state.userList,
  (old, now) => {
    if (labelIndex.value > -1) {
      console.log(JSON.parse(JSON.stringify(old[labelIndex.value])))
      console.log(now[labelIndex.value])
      const list = compareObjects(old[labelIndex.value], oldList.value[labelIndex.value])
      console.log(list, 222)
    }
  },
  { deep: true }
)
onMounted(() => {
  getUsersDataList()
})
const labelValue = ref()
const labelText = ref()
const SubmitEvent = () => {
  console.log(state.userList)
}
const afterLeave = (index) => {
  console.log(index)
  labelValue.value = ''
  labelText.value = ''
}
const addLabel = (index) => {
  labelIndex.value = index
  state.userList[index][labelValue.value] = labelText.value
}
// 展开
const flagTo = (index) => {
  state.userList[index].flag = !state.userList[index].flag
}
const { userList } = toRefs(state)
</script>
<style lang="scss" scoped>
.labrary-change {
  padding: 8px;
  box-sizing: border-box;
  .aaa {
    border: 1px #ccc solid;
    background: #b9e0ef;
    margin-bottom: 16px;
    .top {
      padding: 2px 16px;
      display: flex;
      justify-content: space-between;
      height: 50px;
      background: #ccc;
      width: 100%;
    }
    .content {
      height: 50px;
      .el-form-item {
        width: 300px;
      }
    }
    .flagFalse {
      display: none;
    }
  }
}
</style>
